<template>
    <div class="report">
        <div class="commonSearch">
            <div :class="['commonContent',isCollapse ? '' : 'isShowMore']">
                <el-form :model="searchForm" label-width="80px" size="mini" style="flex:22">
                    <el-form-item label="设备分组">
                        <tree-select @getId="getId"></tree-select>
                    </el-form-item>
                    <el-form-item label="时间">
                        <customSelect @getTime='getTime' @handleClear='handleClear' :clearable='true'  @changeCollapse='changeCollapse'></customSelect>
                    </el-form-item>
                    <el-form-item label="设备">
                        <el-input v-model="searchForm.deviceSn" placeholder="请输入设备" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="发起人">
                        <el-input v-model="searchForm.createUserName" placeholder="请输入发起人" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="联络灯类型">
                        <el-input v-model="searchForm.typeName" placeholder="请输入联络灯类型" clearable></el-input>
                    </el-form-item>
                </el-form>
                <my-button type="primary" icon="el-icon-search" size="mini"
                    style="flex-shirk:0;height:28px;width:73px;margin-left:20px" v-throttle:200='searchList'>查询
                </my-button>
            </div>
            <div :class="['arrow',isCollapse ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"
                @click="isCollapse = !isCollapse">
            </div>
        </div>

        <div class="btnSet">
            <my-button type="primary" size="mini" icon="el-icon-download" plain :disabled='computedTotal'  @btnClick="handleExportGetList()">导出</my-button>
            <!-- 列配置表格 -->
            <pop-checkbox :disposeGroup='disposeGroup' @handleChangeDiposeGroup='handleChangeDiposeGroup'></pop-checkbox>
        </div>

        <!-- 表格 -->
        <table-list ref='tableList' :searchForm='searchForm' :tableGroup='tableGroup' @getTotal='getTotal'>
        </table-list>
    </div>
</template>

<script>
    import {
        productColumns
    } from '@/api/customFieldController'
    import {
        exportGetList
    } from '@/api/lampController'
    import fileDownload from "js-file-download";
    import tableList from './tableList.vue'
    export default {
        data() {
            return {
                searchForm: {
                    groupId: '',
                    deviceSn: '',
                    createUserName: '',
                    typeName: '',
                    createTimeStart: '',
                    createTimeEnd: '',
                    page: 1,
                    limit: 10
                },
                isCollapse: false,
                disposeGroup: [],
                tableGroup: [],
                tableTotal:0
            }
        },
        components: {
            tableList
        },
        computed:{
            computedTotal(){
                return this.tableTotal <= 0
            }
        },
        mounted() {
            this.getProductColumns({
                type: 'lampRequest'
            })
        },
        methods: {
            handleExportGetList() {
                exportGetList(this.searchForm).then(res => {
                    fileDownload(res, '联络灯时详情型表' + new Date().dateFormat('yyyyMMddhhmmss') + '.xlsx', 
                    'application/vnd.ms-excel;charset=UTF-8')
                })
            },
            //分组id
            getId(id) {
                this.searchForm.groupId = id
                this.$refs.tableList.getLampRequestList(this.searchForm)
            },
            //时间
            getTime(payload){
                const {timeStart,timeEnd} = payload
                this.searchForm.createTimeStart = timeStart
                this.searchForm.createTimeEnd = timeEnd
            },
            handleClear(){
                this.searchForm.createTimeStart = ''
                this.searchForm.createTimeEnd = ''
            },
            searchList() {
                this.$refs.tableList.getLampRequestList(this.searchForm)
            },
            getTotal(total){
                this.tableTotal = total
            },
            getProductColumns: async function(data){
                const res = await productColumns(data)
                if (res.code == 200) {
                    this.disposeGroup = []
                    this.tableGroup = []
                    res.data.map((item, i) => {
                        let width = item.name == 'index' ? '80' : '180'
                        if (item.state) {
                            this.tableGroup.push({
                                label: item.name,
                                name: item.chineseName,
                                width
                            })
                        }
                        this.disposeGroup.push({
                            label: item.name,
                            name: item.chineseName,
                            state: item.state
                        })
                    })
                }
            },
            //监视列配置值变化
            handleChangeDiposeGroup(disposeGroup) {
                let configureList = []
                configureList = disposeGroup.map(i => {
                    return {
                        name: i.label,
                        chineseName: i.name,
                        state: i.state
                    }
                })
                this.getProductColumns({
                    type: 'lampRequest',
                    configureList
                }).then(()=>{
                    this.$refs.tableList.updateTable()
                })
            },
            changeCollapse(val){
                this.isCollapse = val
            }
        }
    }
</script>

<style lang="less" scoped>
    .report {
        .commonSearch {
            position: relative;
            .commonContent {
                .el-form-item--mini.el-form-item {
                    width: 33%;

                    /deep/ .el-select {
                        width: 100%;
                    }
                }
            }

            .isShowMore {
                height: 40px;
                overflow: hidden;
            }

            .arrow {
                position: absolute;
                left: 50%;
                bottom: -14px;
                transform: translate(-50%, -50%);
                width: 40px;
                border: 1px solid #e8e8e8;
                border-radius: 18px;
                height: 14px;
                background: #fff;
                cursor: pointer;
                text-align: center;
                line-height: 11px;
                font-size: 12px;
            }
        }

        .btnSet {
            display: flex;
            padding: 20px 0;
            justify-content: space-between;
        }
    }
</style>